<template>
  <div>
    <el-scrollbar :height="height" ref="scrollbarRef">
      <el-row style="justify-content: space-between">
        <el-form-item label="模板来源：" prop="tableName" label-width="85" style="margin-bottom: 2px !important">
          <dict-tag :options="sys_template_type" :value="propertiesForm.modelType" />
        </el-form-item>
        <el-row style="padding-top: 5px">
          <el-button size="small" type="success" @click="submitClick">保存</el-button>
        </el-row>
      </el-row>
      <el-form ref="propertiesRef" :model="propertiesForm" style="margin-top: 10px" label-width="85">
        <el-form-item label="模板名称：" prop="tableName">
          <el-input v-model="propertiesForm.tableName" placeholder="请输入模板名称" clearable />
        </el-form-item>
        <el-form-item label="模板编号：" prop="tableName">
          <el-input v-model="propertiesForm.tableCode" placeholder="请输入模板编号" clearable />
        </el-form-item>
        <el-form-item label="主/续表：" prop="tableName">
          <el-radio-group v-model="propertiesForm.tableMain" @change="tableMainChange">
            <el-radio :label="0">主表</el-radio>
            <el-radio :label="1">续表</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="签字人数量：" prop="signCount" v-if="propertiesForm.tableMain == 0">
          <el-input-number v-model="propertiesForm.signCount" :min="1" :max="10" :precision="0" />
        </el-form-item>
        <el-form-item label="模板适用方案类别：" prop="appTypes" label-width="126">
          <el-select v-model="propertiesForm.appTypes" placeholder="请选择" filterable style="width: 100%" multiple
            collapse-tags>
            <el-option v-for="dict in sys_contract_type" :key="dict.value" :label="dict.label" :value="dict.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主表模板：" prop="tableType" label-width="80" v-show="propertiesForm.tableMain == 1">
          <el-select v-model="propertiesForm.tableIds" placeholder="请选择" filterable multiple remote reserve-keyword
            remote-show-suffix :remote-method="remoteMethod2" :loading="loading6" class="custom-select1"
            style="width: 100%">
            <el-option v-for="item in mainList" :key="item.tableId" :label="item.tableName" :value="item.tableId">
              <el-tooltip class="box-item" effect="customized" placement="right">
                <template #content>
                  {{ item.tableName }}
                </template>
                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                  {{ item.tableName }}
                </div>
              </el-tooltip>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 整表展示规则   为有组织废气结果计算表的时候不显示 为现场原始记录表的时候显示-->
        <el-form-item label="整表展示规则：" prop="showType" label-width="102"
          v-if="propertiesForm.modelType != 13 && propertiesForm.tableMain == 0">
          <el-select v-model="propertiesForm.showType" placeholder="请选择" style="width: 100%" clearable filterable>
            <el-option v-for="dict in sys_template_merge" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- <el-row v-show="propertiesForm.tableMain == 0">
        <p class="pinformation">仪器种类列表</p>
        <p class="totalStyle">共 {{ instrumentList.length }} 条数据</p>
        <el-row style="padding-bottom: 5px; margin-left: 10px">
          <el-button link type="success" icon="plus" @click="handleInstrument"
            >新增</el-button
          >
        </el-row>
      </el-row> -->
      <!-- <el-table
        v-show="propertiesForm.tableMain == 0"
        class="business"
        v-loading="loading"
        :data="instrumentList"
        ref="mainTableRef"
        max-height="30vh"
      >
        <el-table-column label="仪器种类" align="center" prop="instrumentTypeName" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="success"
              icon="Edit"
              @click="editInstrumentList(scope.row)"
              >编辑</el-button
            >
            <el-button
              link
              type="success"
              icon="Delete"
              @click="delInstrumentList(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table> -->
      <el-row v-show="propertiesForm.tableMain == 0" style="margin-top: 10px">
        <p class="pinformation">适用检测项目</p>
        <p class="totalStyle">共 {{ suitList.length }} 条数据</p>
        <el-row style="padding-bottom: 5px; margin-left: 10px">
          <el-button link type="success" icon="plus" @click="jcxmAddClick">新增</el-button>
          <el-button link type="success" icon="plus">导入excel</el-button>
        </el-row>
      </el-row>
      <el-table v-show="propertiesForm.tableMain == 0" class="business" v-loading="loading2" :data="suitList"
        ref="subTableRef" max-height="30vh">
        <el-table-column label="检测类别" align="center" prop="jclbName" />
        <el-table-column label="检测项目数" align="center" prop="jcxmCount">
          <template #default="scope">
            <el-button link type="success" @click="jcxmCountClick(scope.row)">{{
      scope.row.jcxmCount
    }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
          <template #default="scope">
            <el-button link type="success" icon="Edit" @click="editJclbClick(scope.row)">编辑</el-button>
            <el-button link type="success" icon="Delete" @click="delJclbClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row v-show="propertiesForm.tableMain == 0" style="margin-top: 10px">
        <p class="pinformation">适用采样标准</p>
        <p class="totalStyle">共 {{ samplingList.length }} 条数据</p>
        <el-row style="padding-bottom: 5px; margin-left: 10px">
          <el-button link type="success" icon="plus">新增</el-button>
          <el-button link type="success" icon="plus">导入excel</el-button>
        </el-row>
      </el-row>
      <el-table v-show="propertiesForm.tableMain == 0" class="business" v-loading="loading3" :data="samplingList"
        ref="samplingTableRefTableRef" max-height="30vh">
        <el-table-column label="标准编号" align="center" prop="tableCode" />
        <el-table-column label="标准名称" align="center" prop="tableCode">
          <template #default="scope">
            <div v-html="proxy.getSupAndSub(scope.row.tableCode)"></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="success" icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
    </el-scrollbar>
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="jcxmOpen" :title="jcxmTitle" width="1000" @close="jcxmClose">
      <el-form :inline="true">
        <el-form-item label="检测类别：" prop="jclbId">
          <el-select v-model="methodForm.jclbId" placeholder="请输入检测类别" filterable @change="jclbChange">
            <el-option v-for="item in jclbList" :key="item.jclbId" :label="item.jclbName" :value="item.jclbId"
              :disabled="item.flagStatus == 1" />
          </el-select>
        </el-form-item>
        <el-form-item label="适用范围：" prop="syfw" label-width="100px" v-if="methodForm?.jclbId == '1658880734024134291'">
          <el-select v-model="methodForm.syfw" placeholder="请选择">
            <el-option label="昼夜间一起填报" value="0" />
            <el-option label="昼夜间分开填报" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <p class="pinformation">搜索条件</p>
      <el-form :model="methodForm" ref="methodRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="方法编号：" prop="methodCode">
              <el-input v-model="methodForm.methodCode" placeholder="请输入方法编号" clearable maxlength="100"
                @keyup.enter="jclbChange" />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 15px">
            <el-form-item label="方法名称：" prop="methodName">
              <el-input v-model="methodForm.methodName" placeholder="请输入方法名称" clearable maxlength="100"
                @keyup.enter="jclbChange" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 15px">
            <el-form-item label="检测项目：" prop="jcxmName">
              <el-input v-model="methodForm.jcxmName" placeholder="请输入检测项目" clearable maxlength="100"
                @keyup.enter="jclbChange" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="padding-left: 15px">
            <el-button type="success" @click="jclbChange">搜索</el-button>
            <el-button class="business resetBtn" @click="jclbReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <p class="pinformation">检测项目列表</p>
        <p class="totalStyle">共{{ methodList.length }}条数据</p>
      </el-row>
      <el-table ref="methodListRef" :data="methodList" max-height="40vh" @select="handleMethodListSelectionChange"
        @select-all="handleAllMethodListSelectionChange" v-loading="methodLoading" v-if="jcxmOpen">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="方法编号" align="center" prop="methodCode" />
        <el-table-column label="方法名称" align="center" prop="methodName" width="600" />
        <el-table-column label="检测项目" align="center" prop="mJIds" width="130">
          <template #default="scope">
            <el-button link type="success" @click="mJIdsClick(scope)">{{
      (!scope.row.selectedMJIds
        ? scope.row.jcxmCount
        : scope.row.selectedMJIds.length) +
      "/" +
      scope.row.jcxmCount
    }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <span style="margin-right: 15px">已选择 {{ handleMethodList.length }} 条</span>
          <span v-for="item in handleMethodList" v-if="handleMethodList.length < 3">
            {{ item.methodCode }}
          </span>
          <el-button type="danger" @click="clearSelectedMethod">清空选择</el-button>
          <el-button type="success" @click="submit">保存</el-button>
          <span class="resetBtn" style="margin-left: 8px">
            <el-button type="danger" @click="jcxmOpen = false">取消</el-button>
          </span>
        </div>
      </template>
    </el-dialog>
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="open" :title="title" width="1000" @close="methodClose">
      <el-row>
        <el-col :span="8">
          <el-form-item label="方法编号：" prop="methodCode">
            {{ form.methodCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="方法名称：" prop="methodName">
            {{ form.methodName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检测类别：" prop="methodType">
            {{ proxy.getItemByArray(jclbList, "jclbId", methodForm.jclbId, "jclbName") }}
          </el-form-item>
        </el-col>
      </el-row>
      <p class="pinformation">搜索条件</p>
      <el-form :model="jcxmDialogForm" @submit.native.prevent>
        <el-row>
          <el-col :span="8">
            <el-form-item label="检测项目：" prop="jcxmName">
              <el-input v-model="jcxmDialogForm.jcxmName" placeholder="请输入检测项目" clearable maxlength="100"
                @keyup.enter="mJIdsClick(tempScope)" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 15px">
            <el-button type="success" @click="mJIdsClick(tempScope)">搜索</el-button>
            <el-button class="business resetBtn" @click="jcxmReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <p class="pinformation">检测项目列表</p>
        <p class="totalStyle">共{{ mJIdsList.length }}条数据</p>
      </el-row>
      <el-table ref="mJIdsRef" :data="mJIdsList" max-height="40vh" @selection-change="handleSelectionChange"
        v-loading="mJIdsLoading">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="检测项目" align="center" prop="jcxmName">
          <template #default="scope">
            <span v-html="transformation(scope.row.jcxmName)"></span>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="determine">确定</el-button>
          <span class="resetBtn" style="margin-left: 8px">
            <el-button type="danger" @click="open = false">取消</el-button>
          </span>
        </div>
      </template>
    </el-dialog>
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="jcxmCountOpen" :title="jcxmCountTitle" width="1000" @close="jcxmCountClose">
      <p class="pinformation">搜索条件</p>
      <el-form :model="jcxmCountForm" ref="jcxmCountRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="方法编号：" prop="methodCode">
              <el-input v-model="jcxmCountForm.methodCode" placeholder="请输入方法编号" clearable maxlength="100"
                @keyup.enter="jcxmCountSearh" />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 15px">
            <el-form-item label="方法名称：" prop="methodName">
              <el-input v-model="jcxmCountForm.methodName" placeholder="请输入方法名称" clearable maxlength="100"
                @keyup.enter="jcxmCountSearh" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 15px">
            <el-form-item label="检测项目：" prop="jcxmName">
              <el-input v-model="jcxmCountForm.jcxmName" placeholder="请输入检测项目" clearable maxlength="100"
                @keyup.enter="jcxmCountSearh" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="padding-left: 15px">
            <el-button type="success" @click="jcxmCountSearh">搜索</el-button>
            <el-button class="business resetBtn" @click="jcxmCountReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <p class="pinformation">检测项目列表</p>
        <p class="totalStyle">共{{ jcxmCountTotal }}条数据</p>
      </el-row>
      <el-table ref="methodListRef" :data="jcxmCountList" max-height="40vh" v-loading="jcxmCountLoading">
        <el-table-column label="方法编号" align="center" prop="methodCode" />
        <el-table-column label="方法名称" align="center" prop="methodName" />
        <el-table-column label="检测项目" align="center" prop="jcxmName">
          <template #default="scope">
            <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="jcxmCountTotal > 0" :total="jcxmCountTotal" v-model:page="jcxmCountForm.pageNum"
        v-model:limit="jcxmCountForm.pageSize" @pagination="jcxmCountSearh" />
      <template #footer>
        <div class="dialog-footer">
          <span class="resetBtn" style="margin-left: 8px">
            <el-button type="danger" @click="jcxmCountOpen = false">关闭</el-button>
          </span>
        </div>
      </template>
    </el-dialog>
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="instrumentOpen" :title="instrumentTitle" width="500" @close="instrumentClose">
      <el-form :model="instrumentForm" ref="instrumentRef" :rules="rules">
        <el-form-item label="仪器种类：" prop="instrumentType">
          <el-select v-model="instrumentForm.instrumentType" filterable remote reserve-keyword remote-show-suffix
            :remote-method="remoteMethod" :loading="loading4" style="width: 100%">
            <el-option v-for="item in instrumentSelectList" :key="item.dictValue" :label="item.dictLabel"
              :value="parseInt(item.dictValue)" :disabled="item.flagStatus == 1">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="instrumentSave">确定</el-button>
          <el-button type="danger" @click="instrumentOpen = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import bus from "@/utils/eventBus";
import {
  getMethodListByJclb,
  getMJIdsList,
  postMethodList,
  getSuitList,
  getTemplateJcxmList,
  delTableJclb,
  tableJclblist,
  listInstrument,
  postInstrument,
  delInstrument,
  putInstrument,
  getInstrument,
  listTableMain,
} from "@/api/templateEditor/table";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const { sys_template_type } = proxy.useShareDict("sys_template_type");
const { sys_contract_type } = proxy.useOrgDict("sys_contract_type");
const instrumentOpen = ref(false);
const instrumentTitle = ref("仪器种类");
const instrumentForm = ref({});
const { sys_template_merge } = proxy.useDict("sys_template_merge");
const propertiesForm = ref({});
const methodForm = ref({});
const jclbList = ref([]);
const methodList = ref([]);
const mJIdsList = ref([]);

const loading = ref(false);
const loading2 = ref(false);
const loading3 = ref(false);
const loading4 = ref(false);
const methodLoading = ref(false);
const mJIdsLoading = ref(false);
const jcxmCountLoading = ref(false);
const title = ref("");
const jcxmTitle = ref("选择检测方法");
const jcxmDialogForm = ref({});
const form = ref({});
const open = ref(false);
const jcxmOpen = ref(false);
const instrumentList = ref([]);
const suitList = ref([]);
const samplingList = ref([]);
const tableId = ref();
// const heightParams = ref([
//   { tableName: "main", bottomHeight: 250 },
//   { tableName: "sub", bottomHeight: 100 },
//   { tableName: "sampling", bottomHeight: 10 },
// ]);
const rules = ref({
  instrumentType: [{ required: true, trigger: "blur", message: "仪器种类不能为空" }],
});

function handleInstrument() {
  instrumentOpen.value = true;
  instrumentTitle.value = "新增仪器种类";
}

function getInstrumentList() {
  listInstrument({ tableId: tableId.value }).then((res) => {
    instrumentList.value = res.data;
  });
}

function delInstrumentList(row) {
  proxy.$modal.confirm("确定要删除吗？").then(() => {
    delInstrument(row.tIId).then((res) => {
      proxy.$modal.msgSuccess("删除成功");
      getInstrumentList();
    });
  });
}

function editInstrumentList(row) {
  instrumentOpen.value = true;
  instrumentTitle.value = "编辑仪器种类";
  instrumentForm.value.instrumentType = row.instrumentType;
  instrumentForm.value.tIId = row.tIId;
  getInstrument({
    dictType: "sys_instrument",
    dictLabel: row.instrumentTypeName,
    tableId: tableId.value,
  }).then((res) => {
    instrumentSelectList.value = res.rows;
  });
}

const instrumentSelectList = ref([]);

function remoteMethod(val) {
  if (val) {
    loading4.value = true;
    setTimeout(() => {
      getInstrument({
        dictType: "sys_instrument",
        dictLabel: val,
        tableId: tableId.value,
      }).then((res) => {
        loading4.value = false;
        instrumentSelectList.value = res.rows;
      });
    }, 200);
  } else {
    instrumentSelectList.value = [];
  }
}

function instrumentSave() {
  proxy.$refs.instrumentRef.validate((valid) => {
    if (valid) {
      instrumentForm.value.tableId = tableId.value;
      if (!instrumentForm.value.tIId) {
        postInstrument(instrumentForm.value).then((res) => {
          instrumentOpen.value = false;
          getInstrumentList();
        });
      } else {
        putInstrument(instrumentForm.value).then((res) => {
          instrumentOpen.value = false;
          getInstrumentList();
        });
      }
    }
  });
}

bus.off("setTableForm");
bus.on("setTableForm", (tableData) => {
  tableId.value = tableData.tableId;
  mainList.value = tableData.tableList;
  propertiesForm.value = tableData;
  if (propertiesForm.value.tableMain == 0) {
    getInstrumentList();
    loading2.value = true;
    getSuitList({ tableId: tableId.value }).then((res) => {
      suitList.value = res.data;
      loading2.value = false;
    });
  }
});

function instrumentClose() {
  instrumentForm.value = {};
  proxy.$refs["instrumentRef"].clearValidate();
}

function jcxmAddClick() {
  jcxmOpen.value = true;
  tableJclblist({ tableId: tableId.value }).then((res) => {
    jclbList.value = res.data;
  });
  nextTick(() => {
    proxy.$refs["methodListRef"].clearSelection();
  });
}

tableJclblist({ tableId: tableId.value }).then((res) => {
  jclbList.value = res.data;
});

function jclbChange(isFirst) {
  if (!methodForm.value.jclbId) {
    proxy.$modal.msgError("请选择检测类别");
    return false;
  }
  methodLoading.value = true;
  getMethodListByJclb(methodForm.value).then((res) => {
    methodList.value = res.data;
    methodLoading.value = false;
    nextTick(() => {
      methodList.value.forEach((item) => {
        if (item.flagStatus == 1 && typeof isFirst == "boolean" && isFirst) {
          proxy.$refs["methodListRef"].toggleRowSelection(item);
          handleMethodList.value.push(item);
        } else {
          for (const method of handleMethodList.value) {
            if (method.methodId == item.methodId) {
              proxy.$refs["methodListRef"].toggleRowSelection(item);
              break;
            }
          }
        }
      });
    });
  });
}

function jclbReset() {
  proxy.resetForm("methodRef");
  jclbChange();
}

const methodListLength = ref();
const tempScope = ref({});
function mJIdsClick(scope) {
  tempScope.value = scope;
  mJIdsLoading.value = true;
  getMJIdsList({
    jclbId: methodForm.value.jclbId,
    methodId: scope.row.methodId,
    jcxmName: jcxmDialogForm.value.jcxmName,
  }).then((res) => {
    open.value = true;
    title.value = "选择检测项目";
    mJIdsList.value = res.data;
    methodListLength.value = scope.$index;
    form.value.methodCode = scope.row.methodCode;
    form.value.methodName = scope.row.methodName;
    mJIdsLoading.value = false;
    nextTick(() => {
      if (scope.row.selectedMJIds) {
        scope.row.selectedMJIds.forEach((item) => {
          mJIdsList.value.forEach((item1) => {
            if (item == item1.mJId) {
              proxy.$refs["mJIdsRef"].toggleRowSelection(item1, true);
            }
          });
        });
      } else {
        proxy.$refs["mJIdsRef"].toggleAllSelection();
      }
    });
  });
}

const dialogMJIds = ref({});
function handleSelectionChange(selection) {
  dialogMJIds.value = selection.map((item) => {
    return item.mJId;
  });
}

function determine() {
  open.value = false;
  methodList.value[methodListLength.value].selectedMJIds = dialogMJIds.value;
}

const handleMethodList = ref([]);
function handleMethodListSelectionChange(selection, row) {
  const index = selection.indexOf(row);
  if (index == -1) {
    let i = 0;
    for (const selectRow of handleMethodList.value) {
      if (selectRow.methodId == row.methodId) {
        handleMethodList.value.splice(i, 1);
        break;
      }
      i++;
    }
    return;
  }
  handleMethodList.value.push(row);
}

function handleAllMethodListSelectionChange(selection) {
  if (selection.length > 0) {
    for (const selectRow of selection) {
      if (handleMethodList.value.some((item) => item.methodId == selectRow.methodId)) {
        continue;
      }
      handleMethodList.value.push(selectRow);
    }
    return;
  }
  debugger;
  for (const selectRow of methodList.value) {
    let i = 0;
    for (const selectedMethod of handleMethodList.value) {
      if (selectedMethod.methodId == selectRow.methodId) {
        handleMethodList.value.splice(i, 1);
        break;
      }
      i++;
    }
  }
}
function clearSelectedMethod() {
  handleMethodList.value = [];
  submit(true);
}
function submit(isClear) {
  let temp = {
    tableId: tableId.value,
    jclbId: methodForm.value.jclbId,
    mJIds: [],
  };
  //噪声类的昼夜间
  if (methodForm.value.jclbId == '1658880734024134291') {
    if(!methodForm.value.syfw || methodForm.value.syfw.length == 0){
      proxy.$modal.msgError("请选择适用范围！");
      return;
    }
    temp.syfw = methodForm.value.syfw;
  }
  handleMethodList.value.forEach((item) => {
    if (item.selectedMJIds) {
      item.selectedMJIds.forEach((item1) => {
        temp.mJIds.push(item1);
      });
    } else {
      item.mJIds.split(",").forEach((item1) => {
        temp.mJIds.push(item1);
      });
    }
  });
  postMethodList(temp).then((res) => {
    proxy.$modal.msgSuccess("保存成功");
    if (typeof isClear == "boolean") {
      jclbChange();
    } else {
      loading2.value = true;
      getSuitList({ tableId: tableId.value }).then((res) => {
        suitList.value = res.data;
        jcxmOpen.value = false;
        loading2.value = false;
      });
    }
  });
}

function transformation(row) {
  return proxy.getSupAndSub(row);
}

function jcxmClose() {
  delete methodForm.value.jclbId;
  delete methodForm.value.syfw;
  proxy.resetForm("methodRef");
  methodList.value = [];
  handleMethodList.value = [];
}

function methodClose() {
  delete jcxmDialogForm.value.jcxmName;
  form.value = {};
  mJIdsList.value = [];
}

const jcxmCountForm = ref({ pageNum: 1, pageSize: 10 });
const jcxmCountList = ref([]);
const jcxmCountOpen = ref(false);
const jcxmCountTotal = ref(0);
const jcxmCountTitle = ref("查看检测项目");
function jcxmCountClick(row) {
  jcxmCountForm.value.tJId = row.tJId;
  jcxmCountSearh();
}

function jcxmCountSearh() {
  jcxmCountLoading.value = true;
  getTemplateJcxmList(jcxmCountForm.value).then((res) => {
    jcxmCountList.value = res.rows;
    jcxmCountTotal.value = res.total;
    jcxmCountOpen.value = true;
    jcxmCountLoading.value = false;
  });
}

function jcxmCountReset() {
  proxy.resetForm("jcxmCountRef");
  jcxmCountForm.value.pageNum = 1;
  jcxmCountSearh();
}

function jcxmCountClose() {
  proxy.resetForm("jcxmCountRef");
  jcxmCountForm.value.pageNum = 1;
  jcxmCountForm.value.pageSize = 10;
}

function jcxmReset() {
  delete jcxmDialogForm.value.jcxmName;
  mJIdsClick(tempScope.value);
}

function delJclbClick(row) {
  proxy.$modal.confirm("改变检测类别将会删除添加的检测项目，确定要继续吗？").then(() => {
    delTableJclb(row.tJId).then((res) => {
      proxy.$modal.msgSuccess("删除成功");
      bus.emit("reloadTable");
    });
  });
}

function editJclbClick(row) {
  jcxmOpen.value = true;
  tableJclblist({ tableId: tableId.value, jclbId: row.jclbId }).then((res) => {
    jclbList.value = res.data;
    methodForm.value.jclbId = row.jclbId;
    methodForm.value.tJId = row.tJId;
    if (row.syfw) {
      methodForm.value.syfw = row.syfw;
    }
    jclbChange(true);
  });
}

function submitClick() {
  if (
    !propertiesForm.value.showType &&
    propertiesForm.value.tableMain == 0 &&
    propertiesForm.value.modelType != 13
  ) {
    proxy.$modal.msgError("整表展示规则不能为空！");
    return;
  }
  let tableData = propertiesForm.value;
  bus.emit("transferCenter", tableData);
}

bus.off("saveTransfer");
bus.on("saveTransfer", () => {
  submitClick();
});

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
  });
}

const loading6 = ref(false);
const mainList = ref([]);

function remoteMethod2(val) {
  if (val) {
    loading6.value = true;
    setTimeout(() => {
      let temp = {
        tableMain: 0,
        tableName: val,
        params: {},
        modelType: propertiesForm.value.modelType,
      };
      temp.params["filterTableId"] = tableId.value;
      listTableMain(temp).then((res) => {
        loading6.value = false;
        mainList.value = res.rows;
      });
    }, 200);
  } else {
    mainList.value = [];
  }
}

function tableMainChange(val) {
  if (val === 1) {
    delete propertiesForm.value.childTableId;
  } else {
    getInstrumentList();
    loading2.value = true;
    getSuitList({ tableId: tableId.value }).then((res) => {
      suitList.value = res.data;
      loading2.value = false;
    });
  }
}

onMounted(() => {
  nextTick(() => {
    getHeight();
    window.addEventListener("resize", getHeight);
  });
});
onUpdated(() => {
  getHeight();
});
onBeforeUnmount(() => {
  bus.off("saveTransfer");
  window.removeEventListener("resize", getHeight);
});
</script>

<style lang="scss" scoped>
:deep(.el-select__tags-text) {
  max-width: 100px !important;
}
</style>
